<template>
  <base-modal
    :show.sync="visible"
    :title="$t('common.base.editName')"
    width="500px"
    @closed="close"
  >
    <div class="base-modal-content">
      <el-form
        v-if="visible"
        :model="form"
        :rules="rules"
        ref="form"
        
        label-position="top"
        class="form-wrap"
      >
        <el-form-item v-for="(v,i) in fields" :key="i" :label="v.label" :prop="v.language">
          <el-input
            v-model="form[v.language]"
            :placeholder="$t('event.setting.serviceEventTypeSetting.flow.component.modifyMultipleLanguagesDialog.pla1', {count: NAME_MAX})"
          ></el-input>
        </el-form-item>
      </el-form>

    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="submit">{{$t('common.base.confirm')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
import { useFormMultiLanguage } from '@hooks/useFormMultiLanguage'
import i18n from '@src/locales';

const { isOpenMultiLanguage, languagesList } = useFormMultiLanguage()

const NAME_MAX = 100;

const validateTypeName = (rule, value, callback) => {
  // if (value === '') return callback(new Error('请输入事件类型名称'));
  if (value.length > NAME_MAX) callback(new Error(i18n.t('event.setting.serviceEventTypeSetting.manage.component.addServiceEventDialog.tips1', {count: NAME_MAX})));
  // if(!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(value)) return callback(new Error('请输入中文、字母、数字'));

  callback();
};
export default {
  name: 'modify-multiple-languages-dialog',
  props: {
    visible:{
      type:Boolean,
      default:false
    },
    serviceEventTypeConfig: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      fields:[],
      form:{},
      rules:{},
      NAME_MAX,
    };
  },
  mounted(){
    this.initFields()
  },
  methods:{
    close(){
      this.$emit('update:visible', false)
    },
    async submit(){
      try{
        const res = await this.$refs.form.validate();
        if(!res) return
        this.serviceEventTypeConfig.name = this.form['zh']
        this.serviceEventTypeConfig.nameLanguage = this.form
        this.close()
      }catch(err){
        console.log(err)
      }
      
    },
    initFields(){
      // TODO-bdz 跟随多语言枚举走
      let fields = [
        {
          language: 'zh',
          label: isOpenMultiLanguage ? this.$t('common.base.language.ChineseName') : this.$t('common.base.name'),
        },
        {
          language: 'en',
          label:this.$t('common.base.language.EnglishName'),

        },
        {
          language: 'ja',
          label:this.$t('common.base.language.JapaneseName'),
        },
        {
          language: 'ko',
          label:this.$t('common.base.language.KoreaName'),
        }
      ]

      // 这里在useFormMultiLanguage里处理了只剩一个了
      // if(!isOpenMultiLanguage){
      //   languagesList = [languagesList[0]]
      // }

      let languagesKeys = languagesList.map(v=>v.language)

      languagesKeys.map(key=>{
        this.$set(this.form, key, this.serviceEventTypeConfig.nameLanguage[key])
        this.rules[key] = [
          { required: false, message: this.$t('event.setting.serviceEventTypeSetting.flow.component.modifyMultipleLanguagesDialog.tips1'), trigger: 'blur' },
          { validator: validateTypeName, trigger: 'blur' },
        ]
      })
      // 中文必填
      this.rules['zh'] = [
        { required: true, message: this.$t('event.setting.serviceEventTypeSetting.flow.component.modifyMultipleLanguagesDialog.tips1'), trigger: 'blur' },
        { validator: validateTypeName, trigger: 'blur' },
      ]
      this.fields = fields.filter((v)=>languagesKeys.includes(v.language))
    }

  }
  
};
</script>

<style lang="scss" scoped>
  .form-wrap{
    padding: 20px;
  }
  ::v-deep .el-input{
    width: 280px;
 }
</style>
